import React, { useEffect, useState } from "react";
import axios from "axios";
import baseaxiso from "../../../../axios/config";
import './schg.css'
import { Button, Form, Input, Space, Table, Popconfirm, message } from 'antd';
import type { ColumnsType } from "antd/es/table";
import Ed from './edit'
import Cz from "./delte";
import { useNavigate } from 'react-router-dom';

//声明接口
interface DataType {
  id: number;
  name: string;
  lenger: number;
  status: string;
  remote: string;
  time: string;
}
//自定义列
export const columns: ColumnsType<DataType> = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id",
  },
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "区块高度",
    dataIndex: "lenger",
    key: "lenger",
  },
  {
    title: "节点状态",
    key: "status",
    dataIndex: "status",
  },
  {
    title: "ip地址",
  
    dataIndex: "cloud",
  },
  {
    title: "端口状态",
    key: "port",
    dataIndex: "port",
  },
  {
    title: "远程码",
    key: "remote",
    dataIndex: "remote",
  },
  {
    title: "安装时间",
    key: "time",
    dataIndex: "time",
  },
  // {
  //   title: "操作",
    
  //   dataIndex: "open",
  //   render:(_, DataType)=>{
     
  //     return(
        
  //       <>
  //       <Cz id={DataType.id}></Cz>
  //    <Ed id={DataType.id}></Ed>
  //       </>
  //     )
  //   }
  // },
];

const FSchg: React.FC = () => {
  /* 定义数据 */
  const [data, setdata] = useState([]);
  const [ipt, setipt] = useState("");
  const [gf, setgf] = useState("");
  const [d, setd] = useState("");
  const [e, sete] = useState("");
  //查询新作节点数量
  const [f, setf] = useState("");
  //查询总节点数量
  const [c, setc] = useState("");
  //查询正常节点数量
  const [g, setg] = useState("");
  //查询延迟作节点数量
  const [a1, seta1] = useState("");
  //查询掉线作节点数量
  const [b1, setb1] = useState("");

  // 延迟60秒   获取后台一次数据
  const navigator = useNavigate()
  useEffect(() => {
    const settimie = setTimeout(() => {
      
        baseaxiso.get("/schg/query")
        .then((res) => {
        const sourdata = res.data
        sourdata.sort((a: { id: number; } , b: { id: number; })=>{
          return a.id-b.id
        })
          setdata(sourdata);
          console.log(sourdata)
        })
        .catch((err) => {
          message.error("获取后台数据失败");
        });
    }, 60000);
    return () => clearTimeout(settimie);
  });

  /* 节点总数  "/query/z"*/
  baseaxiso
    .get("/schg/query/z")
    .then((res) => {
      const rdata = res.data;
      if (Object.keys(rdata).length === 0) {
        setc("0");
      } else {
        for (let k in rdata) {
          setc(rdata[k].count);
        }
      }
    })
    .catch((err) => {
      message.error("查询总节点数量失败");
    });

  // 正常    "/query/c"*/
  baseaxiso
    .get("/schg/query/c")
    .then((res) => {
      const rdata = res.data;

      if (Object.keys(rdata).length === 0) {
        setg("0");
      } else {
        for (let k in rdata) {
          setg(rdata[k].count);
        }
      }
    })
    .catch((err) => {
      message.error("查询正常节点数量失败");
    });

  //  新作 */   x
  baseaxiso
    .get("/schg/query/x")
    .then((res) => {
      const rdata = res.data;
      if (Object.keys(rdata).length === 0) {
        setf("0");
      } else {
        for (let k in rdata) {
          setf(rdata[k].count);
        }
      }
    })
    .catch((err) => {
      message.error("查询新作节点数量失败");
    });
  // 掉线 */   d
  baseaxiso
    .get("/schg/query/d")
    .then((res) => {
      const rdata = res.data;
      if (Object.keys(rdata).length === 0) {
        setb1("0");
      } else {
        for (let k in rdata) {
          setb1(rdata[k].count);
        }
      }
    })
    .catch((err) => {
      message.error("查询掉线节点数量失败");
    });
  // 延迟 */  y
  baseaxiso
    .get("/schg/query/y")
    .then((res) => {
      const rdata = res.data;
      if (Object.keys(rdata).length === 0) {
        seta1("0");
      } else {
        for (let k in rdata) {
          seta1(rdata[k].count);
        }
      }
    })
    .catch((err) => {
      message.error("查询延迟节点数量失败");
    });
  //  获取官方数据 */gf
  baseaxiso
    .get("/gf")
    .then((res) => {
      setgf(res.data);
    })
    .catch((err) => {
  console.log("获取区块失败")
    });


  /* 获取输入框中的值 */
  const abc = (e: any) => {
    setipt(e.target.value);
    console.log(e.target.value);
  };
  /* 通过按钮查询数据 */ /* 通过按钮查询数据 */

  const abc1 = () => {
    axios
      .get(`http://www.abao-node.cn:300/schg/query/${ipt}`)
      .then((res) => {
        const datas= res.data
        datas.sort((a: { id: number; },b: { id: number; })=>{
         
       return   a.id-b.id
        })
        setdata(datas);

      })
      .catch((err) => {
        message.error("查询失败");
      });
  };
  const qq = () => {
   
  };
  
  return (
    <>
    <div className="bk">
    <div className="container">
      <div className="left">
        
      <div className="font">四川海哥节点监控列表</div>
      </div>
      <div className="right">
      <p>
        本软件由阿豹工作室定制开发<br/>
        电话：19398792867<br/>
        微信 "节点阿豹": 751312329<br/>
      </p>
      </div>
    </div>
    
      <div style={{ textAlign: "center" }}>
        <span style={{ margin: 10 }}>官方区块高度：{gf}</span>
        <span style={{ margin: 10 }}>节点总数量:{c}台</span>
        <span style={{ margin: 10 }}>正常：{g}台</span>
        <span style={{ margin: 10 }}>延迟：{a1}台</span>
        <span style={{ margin: 10 }}>掉线：{b1}台</span>
        <span style={{ margin: 10 }}>新作：{f}台</span>
      </div>
      <div>
        <Form onFinish={qq}>
          名字：
          <Input value={ipt} onChange={abc} style={{ width: 150 }}></Input>
          <Button type="primary" onClick={abc1}>
            查询
          </Button>
        </Form>
      </div>

      <Table columns={columns} dataSource={data} />
      </div>
    </>
  );
};

export default FSchg;

